<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="../../../build/Cesium/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../../../build/CEarth/CEarth.css" type="text/css" />
		<link rel="stylesheet" href="../assets/plugins/layui/css/layui.css" type="text/css" />
		<style>
			.infoview {
				position: absolute;
				top: 10px;
				left: 10px;
				padding: 10px 15px;
				border-radius: 4px;
				border: 1px solid rgba(128, 128, 128, 0.5);
				color: #ffffff;
				background: rgba(0, 0, 0, 0.4);
				box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-body" id="CEarthContainer" style="top: 0rem;left: 0rem;padding-bottom:0rem">
			</div>
		</div>

		<script src="../../../build/Cesium/Cesium.js"></script>
		<script src="../../../build/CEarth/CEarth.js"></script>
		<script src="../assets/plugins/layui/layui.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var $ = layui.jquery,
					form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;

				var app = new CEarth.App('CEarthContainer');

				app.create({
					type: 'Map',
					style: {
						night: true, //是否开启白天黑夜 默认关闭
						fog: true, //是否开启雾效
						density: 0, //雾的浓度 默认0
						minimumBrightness: 0, //由照明产生的雾色的最小亮度。值0.0可以导致雾完全变黑。1.0的值不会影响亮度。
					},
					atmosphere: true, //是否开启大气效果，默认为 true
					complete: function(e) {}
				});

				// 新建一个瓦片图层
				var tileLayer = app.create({
					type: 'TileLayer',
					layer: {
						name: '天地图影像(EPSG:3857)',
						type: 'tdt',
						layer: 'img_d',
						key: '9ae78c51a0a28f06444d541148496e36',
						show: true,
					},
					complete: function(e) {}
				});

				app.scene.light = new Cesium.DirectionalLight({ //去除时间原因影响模型颜色
					direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -
						0.2833588392420772)
				})

				var graphicsLayer = app.create({
					type: 'GraphicsLayer',
					layer: {
						group: {
							id: 'Polygon',
							name: "測試"
						},
						graphics: {
							polygon: {
								show: true,
								positions: [{
										x: 117.271662,
										y: 31.870639,
										z: 21.49
									},
									{
										x: 117.290605,
										y: 31.871517,
										z: 19.47
									},
									{
										x: 117.302056,
										y: 31.858145,
										z: 16.27
									},
									{
										x: 117.299439,
										y: 31.847545,
										z: 14.77
									},
									{
										x: 117.267705,
										y: 31.8491,
										z: 22.11
									}
								],
								height: 0,
								clampToGround: true,
								//classificationType:1,
								// distanceDisplay:{
								// 	near:0,
								// 	far:5000000
								// },
								material: {
									type: 'imge',
									color: 'rgba(255, 255, 0, .3)'
								},
								outline: {
									show: true,
									color: 'rgba(255, 0, 0, 1.0)',
									width: 20,
								}
							},
							properties: {}
						},
						properties: {}
					},
					complete: function(e) {
						console.log(e);
					}
				});
				app.cam.fly({
					location: {
						x: 117.271662,
						y: 31.870639,
						z: 500
					},
					time: 5,
					complete: function() {}
				})
			})
		</script>
	</body>
</html>
